<!--
*@Author: QWP
*@Description: 标签页菜单 / 页面
*@Date: 2023-06-19 17:38:24
-->
<template>
  <!-- <router-view v-if="item['key'] == $attrs.activeKey"></router-view> -->
  <a-tabs v-bind="$attrs"
    hide-add 
    type="editable-card"
    class="u-menu-tabs"
    :tabBarStyle="tabBarStyle"
    @edit="tabsEdit">
    <template #leftExtra>
      <div style="padding: 0 6px">
        <LeftOutlined @click="reCurrent('before')"/>
      </div>
    </template>
    <template #rightExtra>
      <a-space size="middle">
        <CloseOutlined @click="emits('closeAll'); clearTab()" />
        <div style="padding: 0 6px 0 0">
          <RightOutlined @click="reCurrent('next')" />
        </div>
      </a-space>
    </template>
    <a-tab-pane v-for="item in data"
      :tab="item['label']"
      :key="item['key']"
      :closable="item['closable']"
      class="u-menu-tab-pane">
      <!-- <router-view></router-view> -->
    </a-tab-pane>
  </a-tabs>
  <div class="f-padding-16 u-router-view">
    <router-view v-slot="{ Component, route }">
      <keep-alive>
        <component :is="formatComponentInstance(Component, route)"></component>
      </keep-alive>
    </router-view>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'u-menu-tabs'
})
import { ref, reactive, useAttrs, h, computed } from 'vue' 
import type { CSSProperties } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const attrs = useAttrs()
const router = useRouter()
const route = useRoute()
interface Props {
  data: Array
}
const props = defineProps<Props>()

const emits = defineEmits(['update:activeKey', 'tabClick', 'closeAll', 'edit'])

const tabBarStyle: CSSProperties = {
  backgroundColor: "#fff",
  borderRadius: 0
}

// 左右图标切换
const reCurrent = (type) => {
  let index = props.data.findIndex(i => i.key == attrs.activeKey);
  let current = {};
  if(type == 'before') {
    current = props.data[index - 1 < 0 ? 0 : index - 1]
  }
  else if(type == 'next') {
    current = props.data[index + 1 > props.data.length - 1 ? props.data.length - 1 : index + 1]
  }
  emits('update:activeKey', current['key'])
  emits('tabClick', current['key'])
}

const wrapperMap = new Map();
function formatComponentInstance(component, route) {
  let wrapper;
  if(component) {
    const wrapperName = route.path;
    if(wrapperMap.has(wrapperName)) {
      wrapper = wrapperMap.get(wrapperName)
    }
    else {
      wrapper = {
        name: wrapperName,
        render() {
          return h(component)
        },
      }
      wrapperMap.set(wrapperName, wrapper)
    }
  }
  return h(wrapper)
}

// 菜单标签页的单个移除
const tabsEdit = (data) => {
  emits('edit', data)
  if(wrapperMap.has(route.path)) {
    wrapperMap.delete(route.path)
  }
}

// 清除全部标签时调用
const clearTab = () => {
  const index = wrapperMap.get('/TransitIndex/Index')
  wrapperMap.clear()
}

const currentItem = ref({})
const getCurren = computed(() => {
  const current = props.data.find(item => item.key == attrs.activeKey)
  currentItem.value = current;
  // if(current['frameType']) return true
  // return false
})

</script>

<style lang='scss'>
.u-menu-tabs {
  // height: 100%;
  height: 0;
  .ant-tabs-tab {
    border: 0 !important;
    border-radius: 0 !important;
    button {
      padding: 0 0.4em
    }
  }
  .ant-tabs-nav {
    margin-bottom: 0
  }
  > .ant-tabs-nav {
    .ant-tabs-nav-list {
      .ant-tabs-tab {
        background: #fff
      }
      .ant-tabs-tab-active {
        background: #F1F2F6;
        border-bottom-color: #F1F2F6 !important;
        &::before {
          content: "";
          position: absolute;
          top: 1px;
          left: 0;
          width: 100%;
          height: 2px;
          background: #208ff1
        }
      }
    }
  }
  .ant-tabs-content-holder {
    height: calc(100% - 40px);
    // display: none;
    .ant-tabs-content {
      height: 100%;
      overflow: hidden;
      .ant-tabs-tabpane {
        padding: 16px
      }
    }
  }
}
.u-router-view {
  position: relative;
  margin-top: 38px;
  height: calc(100% - 38px);
  .ant-tabs {
    height: 100%;
    .ant-tabs-content-holder {
      height: calc(100% - 40px);
      .ant-tabs-content {
        height: 100%;
        overflow: hidden;
        // .ant-tabs-tabpane {
        //   padding: 16px
        // }
      }
    }
  }
}

</style>